<template>
    <el-dialog :title="isEdit?'编辑应用管理':'新增应用管理'" :visible.sync="dialogForm" width="720px">
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="add-form" label-width="84px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="应用编号" prop="appNo">
                        <el-input v-model="form.appNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="应用名称" prop="appName">
                        <el-input v-model="form.appName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="应用类型" prop="appTypeName">
                        <auto-search-dic code="app_info" @select="v=>form.appTypeCode=v" @selectName="v=>form.appTypeName=v" :name="form.appTypeName"></auto-search-dic>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属业务" prop="appBusName">
                        <auto-search-dic code="business_type" @select="v=>form.appBusCode=v" @selectName="v=>form.appBusName=v" :name="form.appBusName"></auto-search-dic>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="应用描述" prop="appDesc">
                        <el-input type="textarea" :rows="3" style="width: 560px" placeholder="请输入内容" v-model="form.appDesc"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { addAppInfo, updateAppInfo } from "@/api/system/appInfo";
import { PUBLIC_LIMIT, PUBLIC_NUM_CODE } from "@/utils/Reg";
import { maxLength, sortLength } from "@/utils/rules";
import autoSearchDic from "@/components/autocomplete/autoSearchDic";

export default {
    name: "appInfoForm",
    components: { autoSearchDic },
    data() {
        return {
            form: this.clearForm(),
            rules: {
                appNo: [
                    {
                        required: true,
                        message: "请输入应用编号",
                        trigger: "change"
                    },
                    { validator: PUBLIC_NUM_CODE, trigger: "change" },
                    sortLength
                ],
                appName: [
                    {
                        required: true,
                        message: "请输入应用名称",
                        trigger: "change"
                    },
                    {
                        validator: PUBLIC_LIMIT,
                        trigger: "change"
                    },
                    sortLength
                ],
                appTypeName: [
                    {
                        required: true,
                        message: "请选择应用类型",
                        trigger: "change"
                    }
                ],
                appBusName: [
                    {
                        required: true,
                        message: "请选择所属业务",
                        trigger: "change"
                    }
                ],
                appDesc: [maxLength]
            },
            dialogForm: false,
            isEdit: false
        };
    },
    methods: {
        clearForm() {
            return {
                appNo: "",
                appName: "",
                appTypeCode: "",
                appTypeName: "",
                appBusCode: "",
                appBusName: "",
                appDesc: ""
            };
        },
        // 保存
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.isEdit ? this.handleToEdit() : this.handleToAdd();
                } else {
                    this.$message({
                        message: "请检查表单",
                        type: "error"
                    });
                }
            });
        },
        // 新增
        handleToAdd() {
            addAppInfo(this.form).then(res => {
                this.$message({
                    message: "新增成功!",
                    type: "success"
                });
                this.dialogForm = false;
                this.$emit("load");
            });
        },
        // 编辑
        handleToEdit() {
            updateAppInfo(this.form.id, this.form).then(res => {
                this.$message({
                    message: "编辑成功!",
                    type: "success"
                });
                this.dialogForm = false;
                this.$emit("load");
            });
        }
    },
    watch: {
        dialogForm(bool) {
            if (!bool) {
                this.$refs.form.resetFields();
                this.isEdit = false;
                this.form = this.clearForm();
            }
        }
    }
};
</script>

<style scoped>
</style>
